<template>
  <div class="outputDaily">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span style="line-height: 36px;">出库日报</span>
      </div>
      <s-table
        :table="table"
        @http="tableWatch">
        <el-row>
          <el-col :xs="24" :lg="{span: 4, offset: 0}">
            <el-form-item label="波次编号" prop="bcbh">
              <el-input type="text"
                        class="input"
                        v-model="autoVue_table_bcbh"
                        placeholder="波次编号" spellcheck="false" auto-capitalize="off" auto-complete="off"
                        auto-correct="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :lg="{span: 4, offset: 1}">
            <el-form-item label="发运编号" prop="fybh">
              <el-input type="text"
                        class="input"
                        v-model="autoVue_table_fybh"
                        placeholder="发运编号" spellcheck="false" auto-capitalize="off" auto-complete="off"
                        auto-correct="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :lg="{span: 4, offset: 1}">
            <el-form-item label="供应商" prop="gysmc">
              <el-input type="text"
                        class="input"
                        v-model="autoVue_table_gysmc"
                        placeholder="供应商名称" spellcheck="false" auto-capitalize="off" auto-complete="off"
                        auto-correct="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :lg="{span: 4, offset: 1}">
            <el-form-item label="货品编号" prop="hpbh">
              <el-input type="text"
                        class="input"
                        v-model="autoVue_table_hpbh"
                        placeholder="货品编号" spellcheck="false" auto-capitalize="off" auto-complete="off"
                        auto-correct="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :lg="{span: 4, offset: 1}">
            <el-form-item label="货品名称" prop="hpmc">
              <el-input type="text"
                        class="input"
                        v-model="autoVue_table_hpmc"
                        placeholder="货品名称" spellcheck="false" auto-capitalize="off" auto-complete="off"
                        auto-correct="off"></el-input>
            </el-form-item>
          </el-col>
          <el-row>
            <el-col :xs="24" :lg="{span: 4, offset: 0}">
              <el-form-item label="客户地址" prop="khdz">
                <el-input type="text"
                          class="input"
                          v-model="autoVue_table_khdz"
                          placeholder="客户地址" spellcheck="false" auto-capitalize="off" auto-complete="off"
                          auto-correct="off"></el-input>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :lg="{span: 4, offset: 1}">
              <el-form-item label="库位名称" prop="kwmc">
                <el-input type="text"
                          class="input"
                          v-model="autoVue_table_kwmc"
                          placeholder="库位名称" spellcheck="false" auto-capitalize="off" auto-complete="off"
                          auto-correct="off"></el-input>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :lg="{span: 4, offset: 1}">
              <el-form-item label="联系人" prop="lxrxm">
                <el-input type="text"
                          class="input"
                          v-model="autoVue_table_lxrxm"
                          placeholder="联系人" spellcheck="false" auto-capitalize="off" auto-complete="off"
                          auto-correct="off"></el-input>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :lg="{span: 4, offset: 1}">
              <el-form-item label="分配时间" prop="fpsj">
                <el-date-picker
                  v-model="autoVue_table_fpsj"
                  type="daterange"
                  placeholder="选择日期范围">
                </el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
        </el-row>
        <el-form-item slot="multiSelect" label="多选操作" prop="multiSelect" v-if="table.multiSelect">
          <el-row>
            <el-col :span="8">
              <el-button size="small" type="info" @click="tableExport('')">多选导出</el-button>
            </el-col>
          </el-row>
        </el-form-item>
      </s-table>
    </el-card>
  </div>
</template>

<script>
  import {AutoVue} from '~/plugins/Tools';
  export default AutoVue({
    name: 'journaling_outputDaily-FEcarWms',
    head: {
      'title': '出库日报管理',
      'meta': [
        { 'hid': 'description', 'name': 'description', 'content': '乐速科技平台 出库日报 查看进出库日报信息' },
      ],
    },
    store: ['USER'],
    data: {
      table: {
        column: [
          { label: '分配时间',
            prop: 'fpsj',
            minWidth: '200px',
            cRemarks: '',
            type: 'DateRange',
            search: true },
          { label: '分配数量',
            prop: 'fpsl',
            minWidth: '0px',
            cRemarks: '',
            search: false },
          { label: '发运编号',
            prop: 'fybh',
            minWidth: '200px',
            cRemarks: '',
            search: true },
          { label: '客户地址',
            prop: 'khdz',
            minWidth: '300px',
            cRemarks: '',
            search: true },
          { label: '波次编号',
            prop: 'bcbh',
            minWidth: '200px',
            cRemarks: '',
            search: true },
          { label: '联系人',
            prop: 'lxrxm',
            minWidth: '0px',
            cRemarks: '',
            search: true },
          { label: '货品编号',
            prop: 'hpbh',
            minWidth: '0px',
            cRemarks: '',
            search: true },
          { label: '货品名称',
            prop: 'hpmc',
            minWidth: '200px',
            cRemarks: '',
            search: true },
          { label: '库位名称',
            prop: 'kwmc',
            minWidth: '200px',
            cRemarks: '',
            search: true },
          { label: '供应商名称',
            prop: 'gysmc',
            minWidth: '0px',
            cRemarks: '',
            search: true },
          { label: '货品批次',
            prop: 'hppc',
            minWidth: '200px',
            cRemarks: '',
            search: false },
        ],
        url: '/reports/baselibraryPage',
        key: 'id',
        tableColumn: 7,
      },
    },
    methods: {
      tableExport (row) {
        let tableRef = 'table';

        let ids = [];
        if (row) {
          ids.push(row.id);
        } else {
          this[tableRef].multipleSelection.forEach(item => {
            ids.push(item.id);
          });
        }
        this.$confirm('您将导出出库日报报表数据。', '确认导出？', {
          confirmButtonText: '是',
          cancelButtonText: '否',
          type: 'warning',
        })
          .then(async _ => {
            try {
              let option = Object.assign({}, this['autoVue_' + tableRef]);
              await this.p({
                url: '/reports/getoutlibrary',
                method: 'post',
                responseType: 'blob',
                data: {
                  ids,
                  ...option,
                },
              });
            } catch (err) {
              console.log(err);
            }
          })
          .catch(_ => {
          });
      },
    },
    transition: 'slide-fade',
    mounted: function () {
      this.tableWatch('table');
    },
  });
</script>
<style scoped lang="scss">
  .box-card {
    margin: 20px;
  }

  .createTimeSpan {
    display: block;
    margin-top: 34px;
  }

  @media screen and (max-width: 800px) {
    .createTimeSpan {
      margin-top: 0;
    }
    .box-card {
      margin: 0;
    }
  }

  .el-select {
    width: 100%;
  }
</style>

<style lang="scss">
  .outputDaily{
    width: 88vw;
    float: left;
  }
</style>
